<template>
  <div class="lp">
    <div class="space">
      <h2>欢迎来到我的美食空间</h2>
      <div class="user-info" v-for="(item, index) in showuserData" :key="index">
        <div class="user-avatar">
          <img :src="item.UImg" alt="" width="200px" height="150px"/>
        </div>
        <div class="user-main">
          <div>
            <h1></h1>
            <span class="info">
              <em>加入美食杰</em>
              |
              <!-- <router-link :to="{path:'edit/'+item.UId}" >编辑个人资料</router-link> -->
              <router-link :to="{path:'/edit',query:showuserData}" >编辑个人资料</router-link>
            </span>
            <div class="tools">
              <!-- follow-at  no-follow-at-->
              <a href="javascript:;" class="follow-at"> 关注 </a>
            </div>
          </div>
          <div class="kjh">
            <el-row>
              <el-col :span="5"> 用户名称 </el-col>
              <el-col :span="5">
                {{ item.UName }}
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5"> 用户简介 </el-col>
              <el-col :span="10">
                {{ item.USynopsis }}
              </el-col>
            </el-row>
            
          </div>
        </div>

        <ul class="user-more-info">
          <li>
            <div>
              <span>关注</span>
              <strong>77</strong>
            </div>
          </li>
          <li>
            <div>
              <span>粉丝</span>
              <strong>44</strong>
            </div>
          </li>
          <li>
            <div>
              <span>收藏</span>
              <strong>11</strong>
            </div>
          </li>
          <li>
            <div>
              <span>发布菜谱</span>
              <strong>55</strong>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="lpp">
      <!-- v-model="activeName" -->
      <el-tabs class="user-nav">
        <el-tab-pane label="作品" name="works"></el-tab-pane>
        <el-tab-pane label="粉丝" name="fans"></el-tab-pane>
        <el-tab-pane label="关注" name="following"></el-tab-pane>
        <el-tab-pane label="收藏" name="collection"></el-tab-pane>
      </el-tabs>

      <div class="user-info-show">
        <!-- 作品 & 收藏 布局 -->
        <!-- <menu-card :margin-left="13"></menu-card> -->
        <!-- 粉丝 & 关注 布局 -->
        <!-- <Fans></Fans> -->
        <router-view></router-view>
      </div>
    </div>

    <div class="menu-list">
      <div class="info-empty">
        <div>
          <p>私房菜不要偷偷享用哦~~制作成菜谱与大家分享吧！</p>
          <a href="/create">发布菜单</a>
        </div>
      </div>
      <div class="info-empty">
        <div>
          <p>还没有收藏任何的菜谱，去搜自己喜欢的菜谱，收藏起来吧。</p>
          <a href="/recipe">菜谱大全</a>
        </div>
      </div>
      <div style="float: left">
        <el-col
          style="flex: none"
        >
          <el-card
            :body-style="{ padding: '0px' }"
            v-for="(item, index) in showData"
            :key="index"
            style="float: left; margin-left: 20px"
            class="kl"
          >
            <router-link :to="{ path: 'detail/' + item.CId }">
              <img
                :src="item.CImg"
                class="image"
                style="width: 232px; height: 232px"
              />
              <div style="padding: 14px" class="menu-card-detail">
                <strong>菜品名称:{{ item.CName }}</strong
                ><br />
                <span>{{ item.CNum }} 评论</span><br />
                <router-link to="" tag="em">
                  作者:{{ item.CWriter }}
                </router-link>
              </div>
            </router-link>
          </el-card>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
var id = localStorage.getItem("id");
export default {
  data() {
    return {
      showData: [],
      showuserData:{},
    };
  },
  methods: {
    showfoodfirst() {
      this.$axios.get("http://localhost:55943/api/ShowFood").then((res) => {
        this.showData = res.data;
      });
    },
    showuser() {
      this.$axios
        .get("http://localhost:55943/api/ShowUser?id=" + id)
        .then((res) => {
          this.showuserData = res.data;
        });
    },
    // edit(id){
    //   this.$router.push("/edit/"+id);
    // }
  },
  created() {
    this.showfoodfirst();
    this.showuser();
  },
};
</script>

<style scope>
.kjh{
  text-align: left;
  margin-top: 20px;
}
.kl {
  margin-top: 20px;
}
.menu-card-detail {
  display: block;
  height: 50px;
  line-height: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-align: left;
}

.lp {
  width: 100%;
}
.lpp {
  margin-left: 10%;
  width: 80%;
}
.menu-list {
  margin: 0 auto;
  background-color: #fff;
  width: 80%;
  height: 1000px;
}
.space {
  margin: 0 auto;
  background-color: #fff;
  width: 80%;
  height: 350px;
}
.menu-card {
  flex-wrap: wrap;

  margin-bottom: 20px;
  margin-left: 22px;
}

.menu-card-detail {
  display: block;
  height: 50px;
  line-height: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-align: left;
}

.span1 {
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  color: #999;
}
em {
  height: 23px;
  line-height: 23px;
  font-size: 12px;
  color: #ff3232;
}
.space h2 {
  text-align: center;
  margin: 20px 0;
}

.user-info {
  height: 210px;
  background-color: #fff;
  display: flex;
}
.user-avatar {
  width: 210px;
  height: 210px;
}

.user-main {
  width: 570px;
  padding: 20px;
  position: relative;
}
h1 {
  font-size: 24px;
  color: #333;
  line-height: 44px;
}
.info {
  font-size: 12px;
  line-height: 22px;
  color: #999;
}
.a1 {
  color: #999;
}
.tools {
  position: absolute;
  right: 20px;
  top: 20px;
  vertical-align: top;
}
.a2 {
  display: inline-block;
  padding: 3px 0;
  width: 50px;
  color: #fff;
  text-align: center;
}
a.follow-at {
  background-color: #ff3232;
}
a.no-follow-at {
  background-color: #999;
}

.user-more-info {
  width: 190px;
  overflow: hidden;
  padding-top: 20px;
}
li {
  width: 81px;
  height: 81px;
  /* border-radius: 32px; */
  border-bottom-right-radius: 0;
  margin: 0px 8px 8px 0px;
  float: left;
}
.divk {
  display: block;
  height: 81px;
  width: 81px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05) inset;
  border-radius: 32px;
  border-bottom-right-radius: 0;
}

.span2 {
  color: #999;
  line-height: 20px;
  display: block;
  padding-left: 14px;
  padding-top: 14px;
}

strong {
  display: block;
  font-size: 18px;
  color: #ff3232;
  font-family: Microsoft Yahei;
  padding-left: 14px;
  line-height: 32px;
}

.user-nav {
  margin: 20px 0 20px 0;
}
/* .user-info-show {
  min-height: 300px;
  background: #fff;
  padding-top: 20px;
} */
.info-empty {
  width: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
p {
  text-align: center;
  font-size: 12px;
}
.a3 {
  text-align: center;
  display: block;
  height: 48px;
  width: 200px;
  line-height: 48px;
  font-size: 14px;
  background: #ff3232;
  color: #fff;
  font-weight: bold;
  margin: 0px auto;
}
.el-tabs__item.is-active {
  color: #ff3232;
}
.el-tabs__active-bar {
  background-color: #ff3232;
}
.el-tabs__nav-wrap::after {
  background-color: transparent;
}
</style>